<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/index.css}">
   <link rel="stylesheet" th:href="@{/static/css/animate.min.css}">
      <!-- typo排版 -->
   <link rel="stylesheet" th:href="@{/static/css/typo.css}">
   <link rel="stylesheet" th:href="@{/static/css/about.css}"> 
    
    <!-- 引入 layui.js -->
   <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	    
	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
</script>

<!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 
 
 
 

    <div class="container mt-4" >
    
       <!-- 公告 -->
       <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left: 30px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
            
            <span> 关于 </span> 
          
           </p>
         </div>
       </div>
    

     <!-- 导航 -->
       <div class="row">
         <div class="col-md-12 col-12" style="margin-top: 20px">
         
             <div class="card text-center">
           
                 <div class="card-body ">
                 
                       <button onclick="boke()" class="btn btn-outline-success my-2 my-sm-0">  关于博客 </button>     &nbsp;&nbsp;&nbsp; 
                       <button onclick="bozhu()" class="btn btn-outline-success my-2 my-sm-0">关于博主 </button>  &nbsp;&nbsp;&nbsp; 
                       <button onclick="leave()" class="btn btn-outline-success my-2 my-sm-0">  留言墙 </button> 
                 </div>
             </div>
         
         </div>
         </div>
    
       <!-- 博客 -->
       <div class="row" id="yidaboke">
         <div class="col-md-12 col-12">
         
                 <div class="card">
                      <div class="card-body">
                       <div class="text-center">
                        <div class="card-title"><img alt="" src="../static/img/logo2.gif" class="animated bounceIn"> </div>
                         <h2 class="card-title animated slideInLeft" >Smile'Blog  </h2>
                          <p class="card-text " style="font-size: 1.2rem"><h5 class="animated slideInRight">一个Java小白的个人博客，记录一些学习中值得记录的工具&代码 </h5></p>
        
                           <div class="card-text animated slideInLeft text-center" style="color:darkgrey">
                               <i class="layui-icon layui-icon-unlink"> </i>
                               <a style="color:green;text-decoration: none"   href="http://www.yida.link" target="_blank">https://taoyida.top</a>
                           </div>
                           
                            
                           
                            </br>
                          
                        <div class="card-footer text-muted  text-center" id="icons" style="color:black">
                          <a style="color:black;text-decoration: none" href="/blog/index">   <i class="layui-icon layui-icon-home"></i></a>    &nbsp; &nbsp; &nbsp;
                          <a style="color:black;text-decoration: none" href="/blog/types"> <i class="layui-icon layui-icon-list" ></i></a>      &nbsp; &nbsp; &nbsp;
                          <a style="color:black;text-decoration: none" href="#" > <i class="layui-icon  layui-icon-reply-fill"></i> </a> 
                        </div>
                        
                        </div>
                        
                         </div>
                       
                       <div class="typo typo-selection" style="padding: 0 10px"> 
                        
                             <h5 class="text-center">简介 </h5>
                             <p >Smile's Blog是一个由个人开发的博客网站，后端使用SpringBoot+Mybatis，前端框架使用LayUi+SemanticUi。采用阿里云提供的ECS服务器，诞生于2021年08月14日。</p>
                          </p> 
                          <br/>
                          <p>
                             <h4 >第一个版本</h4>
                             <p style="text-indent:3em">后端端使用的是SSM框架，渲染用的是jsp。项目配置繁杂 实现功能却较少   前端页面比较简单且布局生硬。当时没想太多，主要是个人爱好写着玩。接着购买了服务器，域名，开始制作</p>
                          </p>
                       <br/>
                           <p>
                             <h4 >第二个版本</h4>
                             <p style="text-indent:3em">后端端使用的是SSM框架，渲染用的是jsp。项目繁杂 实现功能较少   前端引入多个插件。布局稍合理了些 样式有所提升 视觉体验稍有提高。</p>
                          </p>
                         <br/>
                             <h4 >当前版本</h4>
                             <p style="padding-left:35px;line-height:25px">
                             <span>1.优化了移动端响应</span><br/>
                             <span>2.优化首页文章列表</span><br/>
                             <span>3.优化用户留言、回复功能</span><br/>
                             <span>目前更多功能还在更新中，将会继续和优化页面！</span><br/>
                           
                       </div>
                   
              </div> 
           </div>
      </div>
	  
	  
	  
	  
	   <!-- 博主 -->
	   <div class="row" id="yidabozhu" style="display: none">
	     <div class="col-md-12 col-12 " >
	     
	             <div class="card text-center">
	                  <div class="card-body">
	                    <div class="card-title"><img alt="" src="../static/img/bozhu.jpg" style="width:20%;border-radius: 50%" class="animated bounceIn tu"> </div>
	                    <h2 class="card-title animated slideInLeft" >Smile  </h2>
	                      <p class="card-text" style="font-size: 1.2rem"><h5 class="animated slideInRight">一个大三学生，软件专业，主修Java，Web前端略懂复制粘贴的精髓</h5></p>
	                    
	                    <div class=" animated slideInLeft ">
	                       <p class="card-text" style="color:darkgrey">
	                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-fill" viewBox="0 0 16 16"><path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"/> </svg> 
                             <span >湖北-武汉</span>
	                       </p>
	                    </div>  
	                      </br>
	                      
	                      
	                    <div class="card-footer text-muted" id="icons">
	                      <i id="iconqq" class="layui-icon layui-icon-login-qq"></i></span>  &nbsp; &nbsp; &nbsp;
                          <i id="iconwx" class="layui-icon layui-icon-login-wechat"></i>  &nbsp; &nbsp; &nbsp;
                          <a style="text-decoration: none;color:black"  href="#"> <i id="iconly" class="layui-icon  layui-icon-reply-fill"></i> </a> 
	                    </div>
	                    
	                  
	                     <div class="typo typo-selection" style="padding: 0 10px"> 
	                         <h5>简介 </h5>
	                         <p>Smile，00年，创建本站是因为偶然看到别人的博客网站做的不错，自己也想做一个练手，同时总结记录学习经验。。</p>
	                      </p> 
	                      <br/>
	                      <p>
	                         <h4 style="text-align: left">个人信息</h4>
	                         <p style="text-align: left;text-indent:3em">出生于湖北，暂居武汉，22年毕业，学渣一枚。</p>
	                      </p>
	                      <br/>
	                       <p>
	                         <h4 style="text-align: left">个人介绍</h4>
	                         <p style="text-align: left;text-indent:3em">
                    想要成为优秀的Java Web end Developer，梦想是世界和平，想要发光发热，不止于此。 </p>
	                      </p>
	                      
	                       <br/>
	                       
	                        <p>
	                         <h4 style="text-align: left">爱好</h4>
	                         <p style="text-align: left;text-indent:3em">
               折腾，喜欢研究奇怪的东西(bushi)
。努力学习ing </p>
	                      </p>
	                      
	                        <br/>
	                      
	                         <p>
	                         <h4 style="text-align: left">为什么写博客</h4>
	                         <p style="text-align: left;text-indent:3em">
       很长时间了，总是想写点什么，无关风月，就是想写点什么。无论是记录知识点，总结技能树，人生长谈，风花雪月之事，都可以有一个存档的地方，对于复盘，回忆，都是一个极好的方谭。 </p>
	                      </p>
	                      
	                
	                   </div>
	                 </div>
	          </div> 
	       </div>
	  </div>
	 
	
	  <!-- 留言 -->
	   <div class="row" id="leave" style="display: none">
	     <div class="col-md-12 col-12 " >
	     
	      <div class="card  text-center">
	         <div class="card-body "> 
	         
	            <div class="card-title">
	                 <img src="/static/img/liuy.png" class="animated bounceIn">
	                  <p><h2 class="animated slideInLeft">留言墙</h2></p>
	             </div>
	             
	             <div class="card-bode">
	                <p class=" animated slideInRight "> 本页面可留言、吐槽、提问。欢迎灌水，杜绝广告！</p> 
	                <p style="color:darkgray" class="animated slideInLeft"><i class="icon clock outline"></i><span th:text="${#dates.format(new java.util.Date().getTime(),'yyyy-MM-dd hh:mm')}"></span> </p> 
	             </div>
	             
	             </br>
	             
	             <div class="card-footer ">
	                <h3>欢迎各位大佬吐槽！</h3>
	                <p>Leave a message!</p>
	             </div>
	             
	          </div>
	      </div>
	     
	     
	     
	     
	        <!-- 评论区域 -->
           <div class="ui botton attached  segment">
                 
          <!-- 留言区域列表 -->
         <div id="comment-container" class="ui teal segment">
         
         <div th:fragment="commentList">    
             
  <div class="ui threaded comments" style="max-width: 100%;">
                        <h3 class="ui dividing header">评论</h3>
                        
                        <div th:each="comment : ${comments}"  class="comment" >
                            <a class="avatar">
                                <img th:src="${comment.imgurl}" >
                            </a>
                            <div class="content">
                                <span class="author" >
                                    <a class="acomment" th:href="@{${comment.bloggerhref}}" th:text="${comment.nickname}">Matt</a>
                                    <div th:if="${comment.adminComment == 0 }"   class="ui mini basic green left pointing label m-padded-mini" >游客</div>
                                    <div th:if="${comment.adminComment == 1 }"   class="ui mini basic red left pointing label m-padded-mini" >博主</div>
                                    <div th:if="${comment.adminComment == 2 }"   class="ui mini basic blue left pointing label m-padded-mini" >友人</div>

                                </span>
                                <div class="metadata">
                                    <span th:text="${#dates.format(comment.conmmentDate,'yyyy-MM-dd')}" class="date">Today at 5:42PM</span>
                                </div>
                                <div th:text="${comment.content}" class="text" >
                                    How artistic!
                                </div>
                                <div class="actions">
   <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"   onclick="reply(this)">回复</a>
                                </div>
                            </div>
                            
                            <div class="comments" th:if="${comment.replycommenet.size()>0}">
                                <div class="comment" th:each="reply : ${comment.replycommenet}">
                                    <a class="avatar">
                                        <img src="https://unsplash.it/100/100?image=1005" th:src="@{${reply.imgurl}}">
                                    </a>
                                    <div class="content">
                                        <span class="author" >
                                            <a class="acomment" th:href="@{${reply.bloggerhref}}" th:text="${reply.nickname}">小红</a>
                                            <div th:if="${reply.adminComment == 0 }"   class="ui mini basic green left pointing label m-padded-mini" >游客</div>
                                            <div th:if="${reply.adminComment == 1 }"   class="ui mini basic red left pointing label m-padded-mini" >博主</div>
                                            <div th:if="${reply.adminComment == 2 }"   class="ui mini basic blue left pointing label m-padded-mini" >友人</div>
                                             <i class="layui-icon layui-icon-triangle-r"></i>
                                            &nbsp;<span th:text="${reply.parentComment.nickname}" class="m-teal">@ 小白</span>
                                        </span>
                                        <div class="metadata">
                                            <span th:text="${#dates.format(reply.conmmentDate,'yyyy-MM-dd')}" class="date">Today at 5:42PM</span>
                                        </div>
                                        <div class="text" th:text="${reply.content}">
                                            How artistic!
                                        </div>
                                        <div class="actions">
                                            <a class="reply" data-commentid="1" data-commentnickname="Matt" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" onclick="reply(this)">回复</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                  
                        

                    </div>
 </div>
 </div>
  
  
   <!-- 提交留言的区域 -->
   <div id ="comment-form" class="ui reply form">
     <input type="hidden" name="replyid" value="-1">
    <div class="field">
      <textarea name="content" placeholder="请输入评论信息"></textarea>
    </div>
    
   <!-- 隐藏得两个输入框 -->
    <div class="fields" style="display: none;">

      <div class="field m-margin-bottom-mini" style="width: 50%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="nickname" th:value="${session.user!=null?session.user.nickname:null}" placeholder="昵称"></textarea>
        </div>
      </div>
      
      <div class="field m-margin-bottom-mini" style="width: 50%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="qq" th:value="${session.user!=null?session.user.id:''}" placeholder="QQ号"></textarea>
        </div>
      </div>
	  
   </div>
     
    <div class="fields m-margin-bottom-mini"> 
     
       <div class="field" style="width: 100%">
        <div class="ui left icon input">
           <i class="user icon"> </i>
           <input type="text" name="bloggerhref" placeholder="网址(选填)"></textarea>
        </div>
      </div>
      
  </div>
   
     <div >
        <button th:if="${session.user!=null}" id="commentpost-btn" th:onclick="commentpost([[${session.user.email!=null?session.user.email:''}]])"  class="ui  green teal button"> <i class="icon edit"></i> 发布</button>
        <a th:if="${session.user==null}" href="/login"><button  style="width: 100%;" class="ui  green teal button"> <i class="icon edit"></i> 请登录</button> </a> 
     </div>
     
  </div>
  
  <!-- 留言区域 -->
  
  </div>
	     
	     
	     
	     
   
	     
	     </div>
	     </div>
	  
	  
	  <!-- 对应最外层con -->
	</div>


    <!-- qq模块 -->
<div class="ui qq flowing popup transition hidden"style="padding: 2px">
  <div class="ui orange basic label" >
     <div class="image">
      <img src="../static/img/qq.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- wx模块 -->
 <div class="ui wx flowing popup transition hidden" style="padding: 2px">
  <div class="ui orange basic label">
     <div class="image">
      <img src="../static/img/wx.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- 留言模块 -->
  <div class="ui ly flowing popup transition hidden" >
       去留言~
  </div>
 


</body>
<script type="text/javascript">
  $('#iconqq').popup({
        popup : $('.qq'),
        on : 'hover',
        position: 'top center'
    });
      $('#iconwx').popup({
        popup : $('.wx'),
        on : 'hover',
        position: 'top center'
    });
  $('#iconly').popup({
        popup : $('.ly'),
        on : 'hover',
        position: 'top center'
    }); 
    
    
    function boke(){
       $("#yidabozhu").hide();
       $("#leave").hide();
       $("#yidaboke").show();
        
    }
    
    function bozhu(){ 
        $("#yidaboke").hide();
        $("#leave").hide();
        $("#yidabozhu").show(); 
    }
    
      function leave(){ 
        $("#yidaboke").hide();
        $("#yidabozhu").hide();
        $("#leave").show(); 
    }
    
      
    //评论表单验证
    $('.ui.form').form({
        fields: {
            title: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '请输入评论内容'
                }
                ]
            }
        }
    });
     


  var temporaryemail;

  function commentpost(email) {
      temporaryemail = email;
      //判断用户的邮箱是否为空
      if (email==""){
          //获取layui的layer
          layui.use('layer', function() {
              var layer = layui.layer;
              layer.msg('绑定邮箱可即时收到回复');
          });
      }

      var boo = $('.ui.form').form('validate form');

      if (boo) {
          console.log('校验成功');
          postData();
      } else {
          console.log('校验失败');
      }

  };


    
     function postData() {
        $("#comment-container").load("/about/post",{
            "email"  : temporaryemail,
            "replyid" : $("[name='replyid']").val(), 
            "nickname": $("[name='nickname']").val(),
            "qq"   : $("[name='qq']").val(),
            "content" : $("[name='content']").val(),
            "bloggerhref" : $("[name='bloggerhref']").val(),
            
        },function (responseTxt, statusTxt, xhr) {
        // $(window).scrollTo($('#comment-container'),500);

            layui.use('layer', function() {
                var layer = layui.layer;

                if (temporaryemail=="") {
                    setTimeout(" layer.msg('评论成功！', {icon: 1})", 600 );
                }else {
                    layer.msg('评论成功！', {icon: 1});
                }

            });

            //清除
            $("[name='content']").val('');
            $("[name='replyid']").val(-1);
            $("[name='content']").attr("placeholder", "请输入评论信息...");
        });
    }
    
 
    
    

    
      function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@"+commentNickname).focus();
        $("[name='replyid']").val(commentId);
        $(window).scrollTo($('#comment-form'),500);
    }
   
    
</script>
</html>